<template>
  <div class="_tag" @contextmenu.prevent="openMenu(item, $event)">
    <el-scrollbar style="margin-right: 6px">
      <div enter-active-class="animate__animated animate__bounce" class="left">
        <el-tag
          v-for="(item, index) in tags"
          :closable="item.path !== '/Home'"
          :key="item.path"
          :effect="$route.path == item.path ? 'dark' : 'plain'"
          @click="changMenu(item, tags)"
          @close="handleClose(item, index)"
          size="large"
          :style="{ color: item.textColor }"
        >
          {{ item.menuInfoName }}
        </el-tag>
        <!-- 下拉菜单 -->

        <el-dropdown v-if="showMenu" :style="{ top: `${menuTop}px`, left: `${menuLeft}px` }">
          <el-dropdown-menu class="custom-dropdown-menu">
            <el-dropdown-item command="closeOther">刷新</el-dropdown-item>
            <el-dropdown-item command="closeLeft">关闭左侧</el-dropdown-item>
            <el-dropdown-item command="closeRight">关闭右侧</el-dropdown-item>
            <el-dropdown-item command="closeOther">关闭其它</el-dropdown-item>
            <el-dropdown-item command="closeAll">关闭所有</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-scrollbar>

    <el-dropdown @command="handleCloseBtn" class="_dropdown">
      <el-icon class="menu-icon" @mouseenter="rotateIcon" @mouseleave="resetIcon"><Menu /></el-icon>
      <template #dropdown>
        <el-dropdown-menu class="custom-dropdown-menu">
          <el-dropdown-item command="closeOther" :icon="Loading">刷新</el-dropdown-item>
          <el-dropdown-item command="closeLeft" :icon="Back">关闭左侧</el-dropdown-item>
          <el-dropdown-item command="closeRight" :icon="Right">关闭右侧</el-dropdown-item>
          <el-dropdown-item command="closeOther" :icon="CloseBold">关闭其它</el-dropdown-item>
          <el-dropdown-item command="closeAll" :icon="CloseBold">关闭所有</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { ElNotification } from 'element-plus'
import { Loading, Back, ArrowDown, Right, CloseBold } from '@element-plus/icons-vue'
export default {
  name: 'CommonTag',
  data() {
    return {
      rightMenu: false,
      showMenu: false, // 控制下拉菜单显示
      menuTop: 0, // 下拉菜单的垂直位置
      menuLeft: 0 // 下拉菜单的水平位置
    }
  },
  computed: {
    ...mapState({
      tags: (state) => state.tabsList
    })
  },
  setup() {
    return {
      Loading,
      Back,
      ArrowDown,
      Right,
      CloseBold
    }
  },
  methods: {
    openMenu(tag, event) {
      // event.preventDefault()
      // this.showMenu = true
      // 计算菜单的位置
      this.menuTop = event.clientY + 'px'
      this.menuLeft = event.clientX + 'px'
      console.log('event', event)
      ElNotification({
        message: 'Top：' + this.menuTop,
        offset: 100,
        type: 'success',
        duration: 2000
      })
      ElNotification({
        message: 'Left：' + this.menuLeft,
        offset: 150,
        type: 'success',
        duration: 2000
      })
    },
    // 鼠标悬停时旋转图标
    rotateIcon(event) {
      event.currentTarget.style.transform = 'rotate(150deg)'
    },
    // 鼠标离开时重置图标
    resetIcon(event) {
      event.currentTarget.style.transform = 'rotate(0deg)'
    },
    //点击tag跳转页面
    changMenu(item, tags) {
      console.log('item', item)
      console.log('tags', tags)
      this.$router.push({ path: item.path })
    },
    // 删除tag
    handleClose(item, index) {
      this.$store.commit('closeTag', item)
      if (item.path !== this.$route.path) {
        return
      }
      // 判定是否点击后一个
      if (index === this.tags.length) {
        //跳转它前一个页面
        this.$router.push({ path: this.tags[index - 1].path })
      } else {
        //否定跳转它后一个页面
        this.$router.push({ path: this.tags[index].path })
      }
    },
    //关闭功能按钮
    handleCloseBtn(command) {
      //关闭其它
      if (command === 'closeOther') {
        var activeTag = this.tags.find((item) => {
          return item.path == this.$route.path
        })
        // 根据当前选择选出其它tag
        var noCloseTags = this.getNoCloseTabs(activeTag)
        for (let i = 0; i < noCloseTags.length; i++) {
          this.handleClose(noCloseTags[i], i)
        }
      }
      //全部关闭
      else if (command === 'closeAll') {
        this.$store.commit('closeAll')
        this.$router.push('/Home')
      }
      //关闭左侧
      else if (command === 'closeLeft') {
        var tabindex = this.tags.findIndex((item) => {
          return item.path == this.$route.path
        })
        let left = this.tags.slice(0, tabindex)
        this.$store.commit('BatchDeletionTag', left)
      }
      //关闭右侧
      else if (command === 'closeRight') {
        var activeTagss = this.tags.findIndex((item) => {
          return item.path == this.$route.path
        })
        let right = this.tags.slice(activeTagss + 1)
        this.$store.commit('BatchDeletionTag', right)
      }
    },

    //获取没有选中的标签
    getNoCloseTabs(items) {
      return this.tags.filter((item) => item.path != items.path)
    }
  }
}
</script>

<style lang="less" scoped>
._tag {
  margin-top: 2px;
  display: flex;
  align-items: center;
  background-color: white;
  border-bottom: 1px solid #e6e6e6;
  justify-content: space-between;
  padding: 0 10px;
  cursor: pointer;
  .left {
    display: flex;
    height: 40px;
    align-items: center;
    .el-tag {
      margin-right: 10px;
      .tag-title {
        color: black;
        padding: 8px 12px;
        text-decoration: none;
      }
    }
  }

  ._dropdown {
    height: 40px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    background-color: white;
    // box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);

    .menu-icon {
      transition: color 0.3s;
      font-size: 20px;
      color: #777676;
    }
    .menu-icon:hover {
      color: #409eff; /* 鼠标悬停颜色 */
    }

    .menu-icon {
      transition: transform 0.3s ease; /* 添加过渡效果 */
    }
  }
}
</style>